<template>
    <div>
        <Breadcrumb :route="routes" />
        <div class="wb-container">
            <div class="mian-content">
                <div class="formSearch">
                    <el-form :inline="true" :model="formProtection" class="demo-form-inline" ref="formProtectionRef">
                        <el-form-item label="用户id" prop="user_id">
                            <el-input v-model="formProtection.user_id" placeholder="输入用户Id" clearable />
                        </el-form-item>
                        <el-form-item label="订单id" prop="order_id">
                            <el-input v-model="formProtection.order_id" placeholder="输入订单Id" clearable />
                        </el-form-item>
                        <el-form-item label="维权类型" prop="type">
                            <el-select v-model="formProtection.type" placeholder="选择维权类型" clearable>
                                <el-option v-for="item in typeList" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="维权状态" prop="state">
                            <el-select v-model="formProtection.state" placeholder="选择维权状态" clearable>
                                <el-option v-for="it in stateList" :key="it.value" :label="it.label" :value="it.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button class="btnStyle" @click="searchClick">搜索</el-button>
                            <el-button class="btnStyle" @click="removeClick(formProtectionRef)">重置</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="table">
                    <el-table ref="tableRef" v-loading="loading" :data="tableData" style="width: 100%;height: 100%;"
                        size="small"
                        :header-cell-style="{ background: '#3CB731', color: '#fff', height: '40px', letterSpacing: '2px' }"
                        border>
                        <template #empty>
                            <el-empty description="暂无数据！" />
                        </template>
                        <el-table-column prop="order.order_no" label="订单" align="center" width="300" fixed>
                            <template #default="{ row }">
                                <div class="flexStyle">
                                    <div>订单号：<span>{{ row.order.order_no }}</span></div>
                                    <div>订单金额：<span class="colorRed">￥{{ row.order.amount }}</span></div>
                                    <div class="order-goods" v-for="item in row.order.order_detail_goods" :key="item.id">
                                        <img :src="item?.image" alt="" />
                                        <div>
                                            <span>{{ item?.name }}</span>
                                            <div>￥{{ item?.pivot.price }} / {{ item?.pivot.num }}件</div>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="type" label="维权类型" align="center" width="140">
                            <template #default="{ row }">
                                <el-tag type="danger" v-if="row.type === 1">扣款错误</el-tag>
                                <el-tag type="warning" v-if="row.type === 2">未扣款</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="images" label="图片" align="center" min-width="200">
                            <template #default="{ row }">
                                <div class="img-box">
                                    <el-image v-for="(img, index) in row.images" :src="img" :zoom-rate="1.2" :max-scale="7"
                                        :min-scale="0.2" :preview-src-list="row.images" :initial-index="4" fit="cover"
                                        :preview-teleported="true">
                                        <template #error>
                                            <div class="image-slot">
                                                <el-icon><icon-picture /></el-icon>
                                            </div>
                                        </template>
                                    </el-image>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="user.nickname" label="用户" align="center" width="200">
                            <template #default="{ row }">
                                <div class="userStyle">
                                    <div>用户昵称 : &nbsp;<span class="user-nickname">{{ row.user.nickname }}</span></div>
                                    <div class="userImg">用户头像 :&nbsp;&nbsp; <el-image :src="row.user?.head_img"
                                            style="width: 60px;height: 60px;">
                                            <template #error>
                                                <div class="image-slot">
                                                    <el-icon><icon-picture /></el-icon>
                                                </div>
                                            </template>
                                        </el-image>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="context" label="维权内容" align="center" min-width="120" />
                        <el-table-column label="失败/成功的内容" align="center" min-width="120">
                            <template #default="{ row }">
                                <div v-if="row.success_context !== null">{{ row.success_context }}</div>
                                <div v-if="row.fail_context !== null">{{ row.fail_context }}</div>
                            </template>
                        </el-table-column>

                        <el-table-column prop="state" label="维权状态" align="center" width="120">
                            <template #default="{ row }">
                                <el-tag v-if="row.state == 1">待审核</el-tag>
                                <el-tag type="success" v-if="row.state == 2">维权成功</el-tag>
                                <el-tag type="danger" v-if="row.state == 3">维权失败</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="维权操作" align="center" width="180" fixed="right">
                            <template #default="{ row }">
                                <div v-if="row.state == 1">
                                    <el-button class="success" @click="ProtectionSuccessClick('success', row.id)"
                                        v-has="'successStatus'">成功</el-button>
                                    <el-button class="danger" @click="ProtectionSuccessClick('file', row.id)"
                                        v-has="'errorStatus'">失败</el-button>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="demo-pagination-block">
                    <el-pagination small v-model:current-page="currentPage" v-model:page-size="pageSize"
                        :page-sizes="[5, 10, 15, 20]" :small="small" :disabled="disabled" :background="background"
                        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                        @current-change="handleCurrentChange" />
                </div>
                <el-dialog v-model="dialogFormVisible" title="维权操作" width="30%" align-center>
                    <span class="NoBusiness">{{ Protectiontitle }}</span>
                    <div class="NoBusiness-reason">
                        <el-input v-model="context" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea"
                            placeholder="输入内容" />
                    </div>
                    <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="cancelClick">取消</el-button>
                            <el-button type="primary" @click="confirmRefusalToWithdraw(Protectiontitle)">
                                确认
                            </el-button>
                        </span>
                    </template>
                </el-dialog>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import { useRoute } from "vue-router";
import Breadcrumb from '@/components/nav-header'
import { Picture as IconPicture } from '@element-plus/icons-vue'
import { OrderProtectionList, orderProtectionSuccess, orderProtectionFail } from "@/api/orderProtection.js";
import { ElMessage } from "element-plus";
const route = useRoute()
const routes = ref()

const dialogFormVisible = ref(false)
const tableData = ref([])
const Protectiontitle = ref('')
const context = ref('')
const orderProtectionId = ref(null)
const formProtectionRef = ref()
const loading = ref(true)
const containerRef = ref()
const srcollTop = ref(null)
const tableRef = ref()
const formProtection = reactive({
    user_id: '',
    order_id: '',
    type: '',
    state: '',
    limit: 15,
    page: 1
})
const typeList = reactive([
    {
        label: "扣款错误",
        value: 1
    },
    {
        label: "未扣款",
        value: 2
    }
])
const stateList = reactive([
    {
        label: "待审核",
        value: 1
    },
    {
        label: "维权成功",
        value: 2
    },
    {
        label: "维权失败",
        value: 3
    },
])
//分页器的数据
const currentPage = ref(1)
const pageSize = ref(15)
const small = ref(false)
const background = ref(true)
const disabled = ref(false)
const total = ref(0)

onMounted(() => {
    routes.value = route.matched
    const historyParam = history.state
    if (historyParam.data) {
        formProtection.user_id = historyParam.data
        getOrderProtecttion()
    } else if (historyParam.orderId) {
        formProtection.order_id = historyParam.orderId
        getOrderProtecttion()
    } else {
        getOrderProtecttion()
    }
})
const getOrderProtecttion = async () => {
    const result = await OrderProtectionList(formProtection).then(res => {
        const { code, data } = res
        loading.value = false
        if (code == 200) {
            tableData.value = data.data
            total.value = data.total
        }

    }).catch(() => {
        loading.value = false
    })
}
const ProtectionSuccessClick = (itemState, orderId) => {
    dialogFormVisible.value = true
    orderProtectionId.value = orderId
    console.log(orderProtectionId.value, '维权订单的id');
    if (itemState == 'success') {
        Protectiontitle.value = '维权成功'
    } else if (itemState == 'file') {
        Protectiontitle.value = '维权失败'
    }
}
const cancelClick = () => {
    dialogFormVisible.value = false
    context.value = ''
}
const confirmRefusalToWithdraw = async (title) => {
    console.log(title);
    if (title == '维权成功') {
        const successRes = await orderProtectionSuccess(orderProtectionId.value, { success_context: context.value }).then(res => {
            const { code, data } = res
            if (code == 200) {
                dialogFormVisible.value = false
                getOrderProtecttion()
            }
        })
    } else if (title == '维权失败') {
        const fileRes = await orderProtectionFail(orderProtectionId.value, { fail_context: context.value }).then(result => {
            const { code, data } = result
            if (code == 200) {
                dialogFormVisible.value = false
                getOrderProtecttion()
            }
        })
    }
}
//搜索表单项
const searchClick = () => {
    getOrderProtecttion()
}
//重置表单项
const removeClick = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
    getOrderProtecttion()
}

const handleSizeChange = (pageSize) => {
    pageSize.value = pageSize
    formProtection.limit = pageSize.value
    getOrderProtecttion()
}
const handleCurrentChange = (current) => {
    currentPage.value = current
    formProtection.page = currentPage.value
    getOrderProtecttion()
}
</script>

<style lang="less" scoped>
.formSearch {
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .el-form {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

.img-box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;


    .el-image {
        width: 60px;
        height: 60px;
        margin: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #f0f0f0;
    }

    img {
        width: 60px;
        height: 60px;
        margin: 4px;
    }
}

.NoBusiness {
    color: red;
    font-size: 14px;
}

.NoBusiness-reason {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
}

.flexStyle {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0 20px;

    div {
        margin-bottom: 10px;
    }
}

.userStyle {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 0 20px;

    .user-nickname {
        font-size: 14px;
        color: #8c8c8c;
        margin-left: 6px;
    }


    .userImg {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 10px;


        .el-image {
            background-color: #f0f0f0;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0;
        }
    }
}

.order-goods {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;

    img {
        width: 40px;
        height: 40px;
    }

    div {
        margin: 0;
    }
}

.colorRed {
    color: red;
}

.success {
    color: #fff;
    background-color: rgb(12, 86, 86);
    font-size: 12px;
    letter-spacing: 2px;
    padding: 5px 10px;
}

.danger {
    color: #fff;
    background-color: rgb(108, 17, 17);
    font-size: 12px;
    letter-spacing: 2px;
    padding: 5px 10px;
}

.table {
    width: 100%;
    height: 1000%;
}

.el-table {
    :deep(th.el-table__cell) {
        position: static;
    }

    :deep(td.el-table__cell) {
        position: static;
    }
}

.demo-image__error .block {
    padding: 30px 0;
    text-align: center;
    border-right: solid 1px var(--el-border-color);
    display: inline-block;
    width: 49%;
    box-sizing: border-box;
    vertical-align: top;
}

.demo-image__error .demonstration {
    display: block;
    color: var(--el-text-color-secondary);
    font-size: 14px;
    margin-bottom: 20px;
}

.demo-image__error .el-image {
    padding: 0 5px;
    max-width: 300px;
    max-height: 200px;
    width: 100%;
    height: 200px;
}

.demo-image__error .image-slot {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background: var(--el-fill-color-light);
    color: var(--el-text-color-secondary);
    font-size: 40px;
}

.demo-image__error .image-slot .el-icon {
    font-size: 40px;
}
</style>

